<template>
    <div>
        <el-dialog :title="isAdd ? '添加活动' : '编辑活动'" :visible.sync="isShow" center :before-close="cancel">
            <el-form :model="seckForm" ref="seckinfo" :rules="rules">
                <el-form-item label="活动名称" :label-width="formLabelWidth" prop="title">
                    <el-input v-model="seckForm.title" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="活动期限" :label-width="formLabelWidth">
                    <el-date-picker v-model="timer" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" align="right">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="一级分类" :label-width="formLabelWidth">
                    <el-select v-model="seckForm.first_cateid" placeholder="请选择分类" @change="changeCate(false)">
                        <el-option v-for="item in catelist" :key="item.id" :value="item.id" :label="item.catename">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="二级分类" :label-width="formLabelWidth">
                    <el-select @change="changeSecond(false)" v-model="seckForm.second_cateid" placeholder="请选择分类">
                        <el-option v-for="item in secondCateArr" :key="item.id" :value="item.id" :label="item.catename">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="商品" :label-width="formLabelWidth">
                    <el-select v-model="seckForm.goodsid" placeholder="请选择分类">
                        <el-option v-for="item in goodsArr" :key="item.id" :value="item.id" :label="item.goodsname">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="seckForm.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>
</div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { goodsList, seckAdd, seckEdit, seckInfo } from '../../request/api'
export default {
    props: ['isShow', 'isAdd'],
    data() {
        return {
            formLabelWidth: '120px',
            seckForm: {
                title: '',
                begintime: '',
                endtime: '',
                first_cateid: '',
                second_cateid: '',
                goodsid: '',
                status: 1
            },
            rules: {
                title: [
                    { required: true, message: "请输入活动名称", trigger: "blur" },
                    {
                        min: 2,
                        max: 8,
                        message: "长度在 2 到 8 个字符",
                        trigger: "blur",
                    },
                ],
            },
            timer: null,
            secondCateArr: [],
            goodsArr: []
        }
    },
    computed: {
        ...mapGetters({
            catelist: 'cate/getCateList'
        })
    },
    mounted() {
        this.getCateAction()
    },
    methods: {
        ...mapActions({
            getCateAction: 'cate/changeCateAction',
            getSeckAction: 'seck/getSeckAction'
        }),
        //一级分类获取二级分类事件
        changeCate(n) {
            let index = this.catelist.findIndex(item => this.seckForm.first_cateid == item.id)
            this.secondCateArr = this.catelist[index].children
            //清空二级分类双向数据绑定值
            if (!n) {
                this.seckForm.second_cateid = "";
                this.seckForm.goodsid = ''
            }
        },
        //二级分类获取商品
        changeSecond(n) {
            goodsList({
                fid: this.seckForm.first_cateid,
                sid: this.seckForm.second_cateid
            }).then(res => {
                this.goodsArr = res.list ? res.list : []
            })
            if (!n) {
                this.seckForm.goodsid = "";
            }
        },
        cancel() {
            this.$emit('cancel', false)
            this.reset()
        },
        reset() {
            this.seckForm = {
                title: '',
                begintime: '',
                endtime: '',
                first_cateid: '',
                second_cateid: '',
                goodsid: '',
                status: 1
            }
            this.$refs.seckinfo.resetFields()
            this.timer = null
        },
        lookup(id) {
            seckInfo({ id }).then(res => {
                if (res.code == 200) {
                    this.seckForm = res.list
                    this.seckForm.id = id
                    this.timer = [
                        new Date(parseInt(this.seckForm.begintime)),
                        new Date(parseInt(this.seckForm.endtime)),
                    ];
                    this.changeCate(true)
                    this.changeSecond(true)
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        confirm() {
            this.$refs.seckinfo.validate(val => {
                if (val) {
                    this.seckForm.begintime = new Date(this.timer[0]).getTime()
                    this.seckForm.endtime = new Date(this.timer[1]).getTime()
                    if (this.isAdd) {
                        //添加活动
                        seckAdd(this.seckForm).then(res => {
                            if (res.code == 200) {
                                this.$message.success(res.msg)
                                this.getSeckAction()
                                this.cancel()
                            } else {
                                this.$message.error(res.msg)
                            }
                        })
                    } else {
                        //编辑活动
                        seckEdit(this.seckForm).then(res => {
                            if (res.code == 200) {
                                this.$message.success(res.msg)
                                this.getSeckAction()
                                this.cancel()
                            } else {
                                this.$message.error(res.msg)
                            }
                        })
                    }
                } else {
                    this.$message.error("验证失败");
                    return false;
                }
            })
        }
    }
}
</script>

<style scoped>
/* .el-date-editor--timerange.el-input__inner{
    width:'480px'
} */
</style>